<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="app">
	<input type="button" value="get请求" @click="getInfo"><br/>
	<input type="button" value="post请求" @click="postInfo"><br/>
	<input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 注意：vue-resource 依赖于 Vue,所以先后顺序要注意 -->
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script>
	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{
			getInfo(){
				// 当发起get请求之后，通过 .then 来设置成功的回调函数
				this.$http.get('http://localhost:3003/news')
				.then(res=>console.log(res.body),err=>console.log(err.getMessage()))
				// 通过 result.body 拿到服务器返回的成功的数据
			},
			postInfo(){
				// 发起post请求 application/x-www-form-urlencoded
				// 手动发起 post 请求,默认没有表单格式，所以，有的服务器处理不了
				// 通过 post 方法的第三个参数， {emulateJSON:true} 设置 提交的内容类型为 普通表单数据格式
				var post_obj = {
					"id": 12,
					"title": "这又是一个新的post请求",
					"date": "2018-06-05",
					"likes": 111,
					"views": 222
				}
				this.$http.post('http://localhost:3003/news', post_obj, {emulateJSON:true})
				.then(res=>console.log(res.body), err=>console.log(err.getMessage()))
				// 新增+查询 
				// $.post(domain + '/news',{
				// 		"id": 6,
				// 		"title": "这又是一个新的post请求",
				// 		"date": "2017-12-14",
				// 		"likes": 215,
				// 		"views": 301
				// })
				// .then((res)=>{
				// 	return $.get('http://localhost:3003/news')
				// },(err)=>console.log('新增失败'))
				// .then((data)=>console.log(data),(err)=>console.log('获取数据失败'))
			},
			jsonpInfo(){
				this.$http.jsonp('http://vue.studyit.io/api/jsonp')
				.then(res=>console.log(res.body), err=>console.log(err.getMessage()))
			}
		}
	})
</script>
</body>
</html>